<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>待办事项</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        background-color: #f5f7fa;
        color: #333;
        line-height: 1.6;
        padding: 20px;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: flex-start;
      }

      .container {
        max-width: 600px;
        width: 100%;
        background: white;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        padding: 30px;
        margin-top: 40px;
      }

      .header {
        text-align: center;
        margin-bottom: 30px;
      }

      h1 {
        color: #7e57c2;
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 8px;
      }

      .subtitle {
        color: #666;
        font-size: 16px;
      }

      .input-container {
        display: flex;
        margin-bottom: 25px;
      }

      #todo-input {
        flex: 1;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 8px 0 0 8px;
        font-size: 16px;
        outline: none;
        transition: border-color 0.3s;
      }

      #todo-input:focus {
        border-color: #7e57c2;
      }

      #add-btn {
        background: #7e57c2;
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 0 8px 8px 0;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        transition: background 0.3s;
      }

      #add-btn:hover {
        background: #6a4aaf;
      }

      .filter-buttons {
        display: flex;
        gap: 10px;
        margin-bottom: 25px;
      }

      .filter-btn {
        flex: 1;
        padding: 10px;
        background: #f1f1f1;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s;
      }

      .filter-btn.active {
        background: #7e57c2;
        color: white;
      }

      .todo-list {
        list-style: none;
        margin-bottom: 25px;
      }

      .todo-item {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        background: #f9f9f9;
        border-radius: 8px;
        margin-bottom: 10px;
        transition: all 0.3s;
        animation: fadeIn 0.3s ease;
      }

      .todo-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
      }

      .todo-item.completed {
        opacity: 0.7;
        background: #f0f0f0;
      }

      .todo-checkbox {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #ddd;
        margin-right: 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
      }

      .todo-checkbox.checked {
        background: #7e57c2;
        border-color: #7e57c2;
      }

      .todo-checkbox.checked::after {
        content: "✓";
        color: white;
        font-size: 14px;
      }

      .todo-text {
        flex: 1;
        font-size: 16px;
      }

      .todo-item.completed .todo-text {
        text-decoration: line-through;
        color: #888;
      }

      .delete-btn {
        background: none;
        border: none;
        color: #ff6b6b;
        cursor: pointer;
        font-size: 18px;
        opacity: 0.7;
        transition: opacity 0.3s;
        padding: 5px;
      }

      .delete-btn:hover {
        opacity: 1;
      }

      .stats {
        text-align: center;
        color: #666;
        font-size: 14px;
        padding-top: 15px;
        border-top: 1px solid #eee;
      }

      .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #888;
      }

      .empty-state.hidden {
        display: none;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes fadeOut {
        from {
          opacity: 1;
          transform: translateX(0);
        }
        to {
          opacity: 0;
          transform: translateX(-100px);
        }
      }

      .fade-out {
        animation: fadeOut 0.3s ease forwards;
      }

      /* 响应式设计 */
      @media (max-width: 600px) {
        .container {
          padding: 20px;
          margin-top: 20px;
        }

        h1 {
          font-size: 28px;
        }

        .input-container {
          flex-direction: column;
        }

        #todo-input {
          border-radius: 8px;
          margin-bottom: 10px;
        }

        #add-btn {
          border-radius: 8px;
        }

        .filter-buttons {
          flex-direction: column;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>待办事项</h1>
        <p class="subtitle">简单高效地管理你的任务</p>
      </div>

      <div class="input-container">
        <input type="text" id="todo-input" placeholder="添加新的待办事项..." />
        <button id="add-btn">+ 添加</button>
      </div>

      <div class="filter-buttons">
        <button class="filter-btn active" data-filter="all">全部</button>
        <button class="filter-btn" data-filter="active">未完成</button>
        <button class="filter-btn" data-filter="completed">已完成</button>
      </div>

      <div class="empty-state" id="empty-state">
        <p>暂无待办事项，添加一个任务开始吧！</p>
      </div>

      <ul class="todo-list" id="todo-list"></ul>

      <div class="stats" id="stats">0个未完成，0个总计</div>
    </div>

    <script>
      class TodoItem {
        constructor(id, text, completed = false) {
          this.id = id;
          this.text = text;
          this.completed = completed;
          this.createdAt = new Date();
        }

        toggle() {
          this.completed = !this.completed;
        }
      }

      class TodoList {
        constructor() {
          this.todos = [];
          this.filter = "all";
          this.loadFromStorage();
        }

        addTodo(text) {
          if (!text.trim()) return;

          const id = Date.now().toString();
          const todo = new TodoItem(id, text.trim());
          this.todos.push(todo);
          this.saveToStorage();
          this.render();

          return todo;
        }

        deleteTodo(id) {
          const index = this.todos.findIndex((todo) => todo.id === id);
          if (index !== -1) {
            this.todos.splice(index, 1);
            this.saveToStorage();
            this.render();
          }
        }

        toggleTodo(id) {
          const todo = this.todos.find((todo) => todo.id === id);
          if (todo) {
            todo.toggle();
            this.saveToStorage();
            this.render();
          }
        }

        setFilter(filter) {
          this.filter = filter;
          this.render();
        }

        getFilteredTodos() {
          switch (this.filter) {
            case "active":
              return this.todos.filter((todo) => !todo.completed);
            case "completed":
              return this.todos.filter((todo) => todo.completed);
            default:
              return this.todos;
          }
        }

        getStats() {
          const total = this.todos.length;
          const active = this.todos.filter((todo) => !todo.completed).length;
          return { total, active };
        }

        saveToStorage() {
          localStorage.setItem("todos", JSON.stringify(this.todos));
        }

        loadFromStorage() {
          const stored = localStorage.getItem("todos");
          if (stored) {
            this.todos = JSON.parse(stored).map(
              (item) => new TodoItem(item.id, item.text, item.completed)
            );
          }
        }

        render() {
          const todoList = document.getElementById("todo-list");
          const emptyState = document.getElementById("empty-state");
          const stats = document.getElementById("stats");

          const filteredTodos = this.getFilteredTodos();

          if (filteredTodos.length === 0) {
            emptyState.classList.remove("hidden");
          } else {
            emptyState.classList.add("hidden");
          }

          todoList.innerHTML = "";

          filteredTodos.forEach((todo) => {
            const li = document.createElement("li");
            li.className = `todo-item ${todo.completed ? "completed" : ""}`;
            li.setAttribute("data-id", todo.id);

            li.innerHTML = `
                        <div class="todo-checkbox ${
                          todo.completed ? "checked" : ""
                        }"></div>
                        <span class="todo-text">${todo.text}</span>
                        <button class="delete-btn">🗑️</button>
                    `;

            todoList.appendChild(li);
          });

          const { total, active } = this.getStats();
          stats.textContent = `${active}个未完成，${total}个总计`;
        }
      }

      document.addEventListener("DOMContentLoaded", () => {
        const todoApp = new TodoList();
        const todoInput = document.getElementById("todo-input");
        const addBtn = document.getElementById("add-btn");
        const filterBtns = document.querySelectorAll(".filter-btn");
        const todoList = document.getElementById("todo-list");
        const addTodo = () => {
          const text = todoInput.value;
          const todo = todoApp.addTodo(text);

          if (todo) {
            todoInput.value = "";
            todoInput.focus();
          }
        };

        todoInput.addEventListener("keypress", (e) => {
          if (e.key === "Enter") {
            addTodo();
          }
        });

        addBtn.addEventListener("click", addTodo);

        filterBtns.forEach((btn) => {
          btn.addEventListener("click", () => {
            filterBtns.forEach((b) => b.classList.remove("active"));
            // 为当前按钮添加active类
            btn.classList.add("active");
            // 设置过滤条件
            todoApp.setFilter(btn.dataset.filter);
          });
        });

        // 待办事项列表事件委托
        todoList.addEventListener("click", (e) => {
          const todoItem = e.target.closest(".todo-item");
          if (!todoItem) return;

          const id = todoItem.dataset.id;

          // 点击复选框
          if (e.target.classList.contains("todo-checkbox")) {
            todoApp.toggleTodo(id);
          }

          // 点击删除按钮
          if (e.target.classList.contains("delete-btn")) {
            // 添加删除动画
            todoItem.classList.add("fade-out");
            setTimeout(() => {
              todoApp.deleteTodo(id);
            }, 300);
          }
        });

        todoApp.render();
      });
    </script>
  </body>
</html>
